window.onload = function () {
    var hover1 = document.querySelector('#hover1')
    var hover2 = document.querySelector('#hover2')
    var hdTipList1 = document.querySelectorAll('.hd-tip-list')[0]
    var hdTipList2 = document.querySelectorAll('.hd-tip-list')[1]

    function hdBlock(obj) {
        obj.style.display = "block"
    }

    function hdNone(obj) {
        obj.style.display = "none"
    }

    hover1.addEventListener('mouseover', () => {
        hdBlock(hdTipList1)
    })
    hover1.addEventListener('mouseleave', () => {
        hdNone(hdTipList1)
    })
    hover2.addEventListener('mouseover', () => {
        hdBlock(hdTipList2)
    })
    hover2.addEventListener('mouseleave', () => {
        hdNone(hdTipList2)
    })
    hdTipList1.addEventListener('mouseover', () => {
        hdBlock(hdTipList1)
    })
    hdTipList1.addEventListener('mouseleave', () => {
        hdNone(hdTipList1)
    })
    hdTipList2.addEventListener('mouseover', () => {
        hdBlock(hdTipList2)
    })
    hdTipList2.addEventListener('mouseleave', () => {
        hdNone(hdTipList2)
    })


    var itemArr = document.querySelectorAll('.hd-tip-item')
    itemArr.forEach((val) => {
        val.addEventListener('mouseover', function () {
            this.classList.add('active')
        })
        val.addEventListener('mouseleave', function () {
            this.classList.remove('active')
        })
    })
}